<template>
	<!-- <div> -->
	<el-card class="quick-link-card" shadow="never">
		<template #header>
			<div class="card-header">
				<span>菜单 {{ props.cur + 1 }}</span>
				<el-button class="button" type="danger" size="small" @click="deleteItem(props.cur)">删除</el-button>
			</div>
		</template>

		<el-form :model="props.data" label-width="90px">
			<el-form-item label="名称：">
				<el-input v-model="props.data.title" />
			</el-form-item>
			<el-form-item label="图标：">
				<UploadImg :fileUrl="props.data.imgUrl" :index="props.cur" @handleAvatarSuccess="handleAvatarSuccess" />
			</el-form-item>
			<comOption :data="props.data" :index="0" @change="actionChange"></comOption>
			<!-- <el-form-item label="添加链接：">
				<el-input v-model="props.data.link" />
			</el-form-item> -->
		</el-form>
	</el-card>
	<!-- </div> -->
</template>

<script setup lang="ts">
import UploadImg from '/@/components/upload/index.vue';
import comOption from '/@/components/comOption/index.vue';
const emit = defineEmits(['delete', 'upload', 'actionChange']);

const props = defineProps({
	data: {
		type: Object,
		required: true,
	},
	cur: {
		type: Number,
		required: true,
	},
});

const deleteItem = (cur) => {
	emit('delete', cur);
};

const handleAvatarSuccess = (data) => {
	// console.log(url, index);
	emit('upload', data);
};

const actionChange = (actionData) => {
	emit('actionChange', {cur: props.cur, data: actionData.action});
	// state.form = {
	// 	...state.form,
	// 	...actionData.action,
	// };
};
</script>

<style lang="scss" scoped>
.quick-link-card {
	margin: 12px 0;
	width: 100%;

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.avatar-uploader {
		width: 60px;
		height: 60px;
		border: 1px dashed #dcdfe6;
		.avatar-uploader-icon {
			width: 60px;
			height: 60px;
		}
	}
}
</style>
